<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>创建公会</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard syntax */
    list-style: none;
  }
  #app {
    padding: 10px;
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
/*    background-image: url("/mobile/img/top_bg.jpg");*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }
  
  .top {
    border-radius: 10px;
    font-size: 0;
  }
  .top img {
    width: 100%;
  }
  .guild-box {
    margin-top: 20px;
    border-radius: 10px;
    background: #fff;
    margin: 10px 0;
    padding: 10px;
  }
  .join-btn {
    width: 100%;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="top">
      <img src="/mobile/img/create-top.png" alt="">
    </div>
    <div class="guild-box">
      <van-field v-model="name" label="公会名称" label-width="60px" placeholder="请输入您要创建的公会名称"></van-field>
      <!-- <van-field v-model="text" label="个人姓名" label-width="60px" placeholder="请输入您的姓名"></van-field> -->
      <!-- <van-field v-model="text" label="身份证号" label-width="60px" placeholder="请输入您的身份证号码"></van-field> -->
      <van-field v-model="briefing" label="公会简介" label-width="60px" placeholder="请简单介绍下您的公会" type="textarea" rows="1" autosize></van-field>
      <van-field name="uploader" label="公会图标" label-width="60px">
        <template #label>
          <div style="margin-bottom: 10px;">公会图标</div>
          <!-- 设置accept为空就是选择图片，否则可以拍照 -->
          <van-uploader v-model="uploader" :max-count="1" accept="" capture="" :after-read="uploadFile" />
        </template>
      </van-field>
      <van-field name="uploader" label="官方公众号" label-width="80px">
        <template #label>
          <div style="margin-bottom: 10px;">官方公众号</div>
          <van-image width="180" height="180" src="/mobile/img/bbyy-qrcode.jpg" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button class="join-btn" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round @click="submitForm" :loading="loading" loading-text="提交中...">提交申请</van-button>
      </div>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      token: '',
      name: '',
      briefing: '',
      badge: '',
      uploader: []
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.token) {
        this.token = data.token
        // this.getData()
      }
    },
    methods: {
      uploadFile (file) {
        console.log(file)
        var fd = new FormData()
        fd.append('file', file.file)
        fd.append('path', 'web')
        request.post('/api/system/file/upload', fd, {
          headers: {
            token: this.token,
            'content-type': 'multipart/form-data'
          }
        }).then(res => {
          console.log(res)
          this.badge = res.data
          this.uploader = [{
            url: res.data
          }]
        })
      },
      submitForm() {
        if (!this.name) {
          this.$toast('请输入公会名称')
          return
        }
        // if (!this.badge) {
        //   this.$toast('请上传公会图标')
        //   return
        // }
        this.loading = true
        request.post('/api/business/app/family/add', {
          name: this.name,
          briefing: this.briefing,
          badge: this.badge
        }).then(res => {
          console.log(res)
          this.loading = false
          location.href = `./audit.html?state=3&token=${this.token}`
        }).finally(() => {
          this.loading = false
        })
      },
    }
  })
  </script>
</body>

</html>